<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="../css/index.css" />

    <link rel="stylesheet" href="./css/border.css"/>
</head>

<body>

    <h1>CSS 边框</h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.w3school.com.cn/css/css_border.asp">CSS 边框</a></li>
    </ul>

    <h2>摘抄</h2>
    <p>CSS border 属性允许你规定元素边框的样式、宽度和颜色。</p>


    <h3>边框的样式</h3>
    <p><strong>border-style</strong> 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。</p>

    <h4>border-style 可能的值 </h4>

    <ul>
        <li><strong>none</strong> 定义无边框。</li>
        <li><strong>hidden</strong> 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。</li>
        <li><strong>dotted</strong> 定义点状边框。在大多数浏览器中呈现为实线。</li>
        <li><strong>dashed</strong> 定义虚线。在大多数浏览器中呈现为实线。</li>
        <li><strong>solid</strong> 定义实线。</li>
        <li><strong>double</strong> 定义双线。双线的宽度等于 border-width 的值。</li>
        <li><strong>groove</strong> 定义 3D 凹槽边框。其效果取决于 border-color 的值。</li>
        <li><strong>ridge</strong> 定义 3D 垄状边框。其效果取决于 border-color 的值。</li>
        <li><strong>inset</strong> 定义 3D inset 边框。其效果取决于 border-color 的值。</li>
        <li><strong>outset</strong> 定义 3D outset 边框。其效果取决于 border-color 的值。</li>
        <li><strong>inherit</strong> 规定应该从父元素继承边框样式。</li>
    </ul>

    <h4>border-style 示例 </h4>
    <div id="box_style_container">
        <div id="box">
            <div id="content"></div>
        </div>
    </div>

    <pre>
&lt;div id=&quot;box_style_container&quot;&gt;
    &lt;div id=&quot;box&quot;&gt;
        &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

#box_style_container {
    width: 100px;
    height: 100px;
    overflow: auto;
}

#box_style_container #box {
    padding: 10px;
    margin: 10px;
    border: solid 10px red;
    border-style: dotted dashed solid double;
}

#box_style_container #content {
    width: 40px;
    height: 40px;
    background-color: green;
}

    </pre>

    <h3>边框的宽度</h3>
    <p><strong>border-width</strong> 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。</p>

    <h4>border-width 可能的值</h4>
    <ul>
        <li><strong>thin</strong>	定义细的边框。</li>
        <li><strong>medium</strong>	默认。定义中等的边框。</li>
        <li><strong>thick</strong> 定义粗的边框。</li>
        <li><strong>length</strong>	允许您自定义边框的宽度。</li>
        <li><strong>inherit</strong>	规定应该从父元素继承边框宽度。</li>
    </ul>


    <h4>border-width 示例 </h4>
    <div id="box_width_container">
        <div id="box">
            <div id="content"></div>
        </div>
    </div>

    <pre>
&lt;div id=&quot;box_width_container&quot;&gt;
    &lt;div id=&quot;box&quot;&gt;
        &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

#box_width_container {
    width: 100px;
    height: 100px;
    overflow: auto;
}

#box_width_container #box {
    padding: 10px;
    margin: 10px;
    border: solid 10px red;
    border-width: thin medium thick 10px;
}

#box_width_container #content {
    width: 40px;
    height: 40px;
    background-color: green;
}
    </pre>


    <h3>边框的颜色</h3>
    <p><strong>border-color</strong> 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。</p>


    <h4>border-color 可能的值</h4>
    <ul>
        <li><strong>color_name</strong>	规定颜色值为颜色名称的边框颜色（比如 red）。</li>
        <li><strong>hex_number</strong>	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。</li>
        <li><strong>rgb_number</strong> 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。</li>
        <li><strong>transparent</strong>	默认值。边框颜色为透明。</li>
        <li><strong>inherit</strong>	规定应该从父元素继承边框颜色。</li>
    </ul>

    <h4>border-color 示例 </h4>
    <div id="box_color_container">
        <div id="box">
            <div id="content"></div>
        </div>
    </div>

    <pre>
&lt;div id=&quot;box_color_container&quot;&gt;
    &lt;div id=&quot;box&quot;&gt;
        &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

#box_color_container {
    width: 100px;
    height: 100px;
    overflow: auto;
}

#box_color_container #box {
    padding: 10px;
    margin: 10px;
    border: solid 10px red;
    border-color: green #ff0000 rgb(0,0,255) transparent;
}

#box_color_container #content {
    width: 40px;
    height: 40px;
    background-color: green;
}
    </pre>


    <h3>附录 - CSS 边框属性</h3>

    <ul>
        <li><strong>border</strong> 简写属性，用于把针对四个边的属性设置在一个声明。</li>
        <li><strong>border-style</strong> 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。</li>
        <li><strong>border-width</strong> 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。</li>
        <li><strong>border-color</strong> 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。</li>

        <li><strong>border-bottom</strong> 简写属性，用于把下边框的所有属性设置到一个声明中。</li>
        <li><strong>border-bottom-style</strong> 	设置元素的下边框的样式。</li>
        <li><strong>border-bottom-width</strong> 设置元素的下边框的宽度。</li>
        <li><strong>border-bottom-color</strong> 设置元素的下边框的颜色。</li>


        <li><strong>border-left</strong> 简写属性，用于把左边框的所有属性设置到一个声明中。</li>
        <li><strong>border-left-style</strong> 设置元素的左边框的样式。</li>
        <li><strong>border-left-width</strong> 设置元素的左边框的宽度。</li>
        <li><strong>border-left-color</strong> 设置元素的左边框的颜色。</li>

        <li><strong>border-top</strong> 简写属性，用于把上边框的所有属性设置到一个声明中。</li>
        <li><strong>border-top-style</strong> 设置元素的上边框的样式。</li>
        <li><strong>border-top-width</strong> 设置元素的上边框的宽度。</li>
        <li><strong>border-top-color</strong> 设置元素的上边框的颜色。</li>

        <li><strong>border-right</strong> 简写属性，用于把右边框的所有属性设置到一个声明中。</li>
        <li><strong>border-right-style</strong> 设置元素的右边框的样式。</li>
        <li><strong>border-right-width</strong> 设置元素的右边框的宽度。</li>
        <li><strong>border-right-color</strong> 设置元素的右边框的颜色。</li>

    </ul>
</body>

</html>